<template>
  <div>
    <div class="flex justify-between items-center mb-6">
      <h3 class="text-lg font-semibold">游戏列表</h3>
      <router-link to="/admin/games/add" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
        <i class="fa fa-plus mr-2"></i>添加游戏
      </router-link>
    </div>
    
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">封面</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">标题</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">发布日期</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <tr v-for="game in games" :key="game.id">
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ game.id }}</td>
            <td class="px-6 py-4 whitespace-nowrap">
              <img :src="`http://localhost:3000/images/games/${game.image}`" alt="游戏封面" class="h-12 w-12 object-cover rounded">
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ game.title }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ game.release_date }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ game.genre }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
              <div class="flex space-x-2">
                <router-link :to="`/admin/games/edit/${game.id}`" class="text-blue-600 hover:text-blue-900">
                  <i class="fa fa-edit"></i>
                </router-link>
                <button @click="deleteGame(game.id)" class="text-red-600 hover:text-red-900">
                  <i class="fa fa-trash"></i>
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      games: []
    };
  },
  mounted() {
    this.fetchGames();
  },
  methods: {
    async fetchGames() {
      try {
        const response = await this.axios.get('/games');
        this.games = response.data;
      } catch (error) {
        console.error(error);
        alert('获取游戏列表失败');
      }
    },
    async deleteGame(gameId) {
      if (!confirm('确定要删除这个游戏吗？这将删除所有相关评论！')) {
        return;
      }
      
      try {
        await this.axios.delete(`/games/${gameId}`);
        this.fetchGames();
      } catch (error) {
        console.error(error);
        alert('删除游戏失败');
      }
    }
  }
};
</script>  